<template>
	<view style="height: 1400rpx;">
		<!-- 背景图 -->
		<view class="wh-w750" style=" position: relative;">
			<image :src="nImg" mode="aspectFill"
				style="min-height: 100vh; width: 750rpx;">
			</image>
		</view>
		
		<!-- 转盘 -->
		<view @click="OpenRealDesc" class="position-absolute colorfff font22 w-100 text-right" style="top: 570rpx; right: 60rpx;">规则说明></view>
		<view class="luck-list"
			style="position: absolute;top: 650rpx;right: 0;left: 62rpx; width: 630rpx;">
			<view v-for="(item,index) in AwardList" :key="index">
				<view class="cell-item" :class="index==4||index===sel?'y-b':'w-b'"
					@tap="begin(index)">
					<view class="cell-content"
						:class="index==4||index===sel?'y':'w'">
						<image :src="item.image" mode="widthFix" :style="[{width: index==4? '100rpx' : '70rpx'},{height: index==4? '100rpx' : '70rpx'}]" v-if="item.image"></image>
						<view style="margin-top: 5rpx;">
							<text style="font-size: 21rpx; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view @click="gotoViewPrizesPage" class="colorfff rounded50 text-center font32" style="width: 70%; height: 80rpx; background: #a567f4; border: 1px solid #fff; margin-top: 15rpx; line-height: 80rpx;">查看我的奖品</view>
			<view class="d-flex d-flex-column w-100">
				<view class="colorfff mt-2 mb-4 text-center">还剩 {{times}} 次抽奖机会</view>
				<view class="colorfff font30 text-center" style="width: 220rpx; line-height: 60rpx; height: 60rpx; background-repeat: no-repeat; background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/2171644.png); background-size: 100% 100%;">活动规则</view>
				<view class="colorfff font22 my-2">1. 活动时间：2022-12-12 至 2026-12-12</view>
				<view class="colorfff font22">2. 实物奖励将在7个工作日内寄出，在我的奖品查看快递信息</view>
			</view>
		</view>
		
		<!-- 抽奖次数用完了 -->
		<view class="position-fixed top-0 left-0 right-0 bottom-0" style="background: rgba(0, 0, 0, .5); z-index: 1000;" v-if="DrawFinish">
			<view class="DrawFinish">
				<view class="position-absolute d-flex d-flex-center d-flex-bottom w-100" style="top: 575rpx;">
					<view @click="closeDrawFinish" class="font-bold px-8" style="color: #fffed9; font-size: 46rpx; height: 90rpx; line-height: 90rpx;">知道了</view>
				</view>
			</view>
		</view>
		
		<!-- 规则说明 -->
		<view v-if="RealDescDisplay" class="position-fixed top-0 left-0 right-0 bottom-0" style="background: rgba(0, 0, 0, .6); z-index: 1001;">
			<view class="RealDesc position-relative rounded15">
				<view class="d-flex mb-2 d-flex-middle">
					<view class="colorfff font30 text-center mt-2" style="flex: 1; margin-left: 65rpx;">规则说明</view>
					<view class="mr-2 mt-2" @click="closeRealDesc">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close-white.png" style="width: 45rpx; height: 45rpx;"></image>
					</view>
				</view>
				<view class="font22 px-2 pb-2" style="color: #f9f6fe; overflow: scroll; height: 726rpx;">
					<view class="font24" v-for="i in RealDescList" :key="i.id">{{i}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 背景图
			nImg: String,
			// 列表
			AwardList:{
				type:Array,
				default:[]
			},
			// 中奖索引
			sjNum: {
				type: Number,
				default:0
			},
			// 抽奖次数
			times:{
				type: Number,
				default: 0
			},
			// 规则说明
			RealDesc: String,
			// 抽奖id
			resourceId: String
		},
		data() {
			return {
				sel: '',
				FastNums: 0,
				SlowNums: 0,
				time: 1000,
				LoopStatus: true,
				noClick: true,
				DrawFinish: false,
				RealDescDisplay: false,
				RealDescList: []
			}
		},
		methods: {
			// 查看我的奖品
			gotoViewPrizesPage() {
				if(!this.resourceId) {
					uni.showToast({
						title: '暂无抽奖奖励',
						icon: 'none',
						duration: 1500
					});
					return
				}
				uni.navigateTo({
					url: '/pagesApp/ViewPrizes/ViewPrizes?activityId='+this.resourceId
				})
			},
			closeDrawFinish() {
				this.DrawFinish = false
			},
			// 中奖后的逻辑
			updateMoney(sjNum){
				this.$emit('updateMoney',sjNum)
			},
			// 开始抽奖
			begin(index) {
				if(this.times <= 0) {
					this.DrawFinish = true
					return
				}
				if (index == 4) {
					if (!this.noClick) {
						uni.showToast({
							title: '请勿频繁点击',
							icon: "none",
							position: 'bottom'
						});
						return
					};
					uni.$emit('BeginDraw');
					this.noClick = false;
					this.FastNums = 0
					this.SlowNums = 0
					this.time = 200
					this.LoopStatus = true
					this.loop()
				}
			},
			// 抽奖过程 控制
			loop() {
				let sjNum = this.sjNum
				// console.log(sjNum)
				if (!this.sel || this.sel < 9) {
					if (this.sel == 3) {
						this.sel = 0
					} else if (this.sel === '') {
						this.sel = 0
					} else if (this.sel == 2) {
						this.sel = 5
					} else if (this.sel == 5) {
						this.sel = 8
					} else if (this.sel == 8) {
						this.sel = 7
					} else if (this.sel == 7) {
						this.sel = 6
					} else if (this.sel == 6) {
						this.sel = 3
					} else {
						this.sel++
					}
					this.FastNums++
					if (this.FastNums == 4) {
						this.FastNums = 0
						this.time = 50
						this.SlowNums++
					}
					if (this.SlowNums == 8) {
						this.SlowNums = 0
						this.time = 500
						this.FastNums = 5
					}
					if (this.FastNums > 5) {
						if (this.sel == sjNum) {
							this.noClick = true;
							this.LoopStatus = false
							// 成功的逻辑
							this.updateMoney(sjNum)
						}
					}
					if (this.LoopStatus) {
						setTimeout(() => {
							this.loop()
						}, this.time);
					}
				}
			},
			// 资产查询
			async AssetInquiry() {
				let params = {
					resourceType: 4
				}
				let res = await FirstChangeApi.AssetInquiry(params)
				this.times = res.records[0].count
			},
			// 打开规则说明
			OpenRealDesc() {
				this.RealDescList = this.RealDesc.split("<br/>");
				this.RealDescDisplay = true
			},
			// 关闭规则说明
			closeRealDesc() {
				this.RealDescDisplay = false
			}
		}
	}
	
</script>

<style scoped>
/* 抽奖 */
.luck-list{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.cell-item {
	width: 160rpx;
	height: 168rpx;
	border-radius: 30rpx;
	margin: 8rpx;
}

.cell-content {
	width: 160rpx;
	height: 148rpx;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.w {
	background-color: #fdf2ee;
}

.w-b {
	background-color: #f8d0c3;
}
.y {
	background-color: #fee610;
}

.y-b {
	background-color: #EFCD22;
}
.DrawFinish {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 550rpx;
	height: 785rpx;
	background-image: url(https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/0219180918.png);
	background-size: 100% 100%;
}
.RealDesc {
	width: 610rpx;
	height: 850rpx;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: linear-gradient(180deg, #ba68fb 0%, #8548f3 40%, #8548f3 69%, #ba68fb 100%);
}
</style>